<?php if(!defined('HDPHP_PATH'))exit;C('SHOW_NOTICE',FALSE);?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
	<title></title>
	<link rel="stylesheet" href="http://127.0.0.1/project/hdphp_fk_cms/Static/Bootstrap/Css/bootstrap.min.css" />
	<link rel="stylesheet" href="http://127.0.0.1/project/hdphp_fk_cms/Static/hdjs/hdjs.css" />
	<link rel="stylesheet" href="http://127.0.0.1/project/hdphp_fk_cms/Static/admin/css/common.css" />
	<script type="text/javascript" src='http://127.0.0.1/project/hdphp_fk_cms/Static/Js/jquery-1.8.2.min.js'></script>
	<!--富文本编辑器-->
	<script type="text/javascript" charset="utf-8" src="http://127.0.0.1/project/hdphp_fk_cms/Static/ueditor1_4_3/ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="http://127.0.0.1/project/hdphp_fk_cms/Static/ueditor1_4_3/ueditor.all.min.js"> </script>
    <script type="text/javascript" charset="utf-8" src="http://127.0.0.1/project/hdphp_fk_cms/Static/ueditor1_4_3/lang/zh-cn/zh-cn.js"></script>
    <script type="text/javascript" src="http://127.0.0.1/project/hdphp_fk_cms/Static/uploadify/jquery.uploadify.min.js"></script>
    <link href="http://127.0.0.1/project/hdphp_fk_cms/Static/uploadify/uploadify.css" type="text/css" rel="stylesheet"></link>
</head>
<style type="text/css">
    /*列表图样式*/
	#uploadList ul li{float:left; margin-right: 10px;}
	/*商品图样式*/
	#picList ul li{float:left; margin-right: 10px;}
</style>
<body>
	<div class="container-fluid">
	<div class="row-fluid">
	<div class="span12">
    
	<form action="" method='post' id="shopForm">
		<fieldset>
			<legend>添加商品</legend>
			<!--商品基本信息-->
			<table class='table table-bordered table-hover'>
				<thead>
					<tr>
						<th colspan="2" class="btn btn-primary">基本信息</th>
					</tr>
				</thead>
				<tbody>
					<tr class="info">
						<td>所属分类</td>
						<td>
							<select name="class_cid">
							    <option value="0">-----请选择-----</option>
							    <?php foreach ($class as $k=>$v){?>
								    <option value="<?php echo $v['cid'];?>" type_tid="{v.tid}"><?php echo $v['_name'];?></option>								    
								<?php }?>
							</select>
						</td>
					</tr>
					<tr class="info">
						<td>所属品牌</td>
						<td>
							<select name="brand_bid">
								<option value="0">-----请选择-----</option>
                                <?php foreach ($brand as $k=>$v){?>
                                    <option value="<?php echo $v['bid'];?>"><?php echo $v['bname'];?></option>
                                <?php }?>
								
							</select>
						</td>
					</tr>
					<tr class="info">
						<td>商品名称</td>
						<td>
							<input type="text" name='gname'/>
						</td>
					</tr>
					<tr class="info">
						<td>单位</td>
						<td>
							<input type="text" name='unit' value='件'/>
						</td>
					</tr>
					<tr class="info">
						<td>市价场</td>
						<td>
							<input type="text" name='sales_price'/>
						</td>
					</tr>
					<tr class="info">
						<td>商城价</td>
						<td>
							<input type="text" name='shop_price'/>
						</td>
					</tr>
					<tr class="info">
						<td>点击次数</td>
						<td>
							<input type="text" name='click'/>
						</td>
					</tr>
				</tbody>
			</table>
            <!--商品基本信息结束-->
            <!--商品属性-->
			<p class="btn btn-primary">商品属性</p>
			<table class="table table-bordered table-hover" id='attr' class="info">
				
			</table>
			<!--商品属性结束-->
			<!--商品规格-->
			<p class="btn btn-primary">商品规格</p>
			<table class="table table-bordered table-hover" id='spec'>
				
			</table>
            <!--商品规格结束-->
            <!--列表图-->
			<table class='table table-bordered'>
				<tr>
					<th colspan="3" class="btn btn-primary">列表图</th>
				</tr>
				<tr class="info">
					<td>上传图片</td>
					<td>
						<div lab="uploadFile">
                            <input id="listpic" type="file" multiple="true">
                            <span>类型: *.jpg,*.png 大小: 2000KB 数量: 1</span>
                            <script type="text/javascript">
                            $(function() {
                                $('#listpic').uploadify({
                                    'formData': {//POST数据
                                '<?php echo session_name();?>' : '<?php echo session_id();?>',
                            },
                            'fileTypeDesc' : '上传文件',//上传描述
                            'fileTypeExts' : '*.jpg;*.png',
                            'swf'      : 'http://127.0.0.1/project/hdphp_fk_cms/Static/uploadify/uploadify.swf',
                            'uploader' : '<?php echo U("uploadList");?>',//上传操作方法
                            'buttonText':'选择文件',
                            'fileSizeLimit' : '2000KB',
                            'uploadLimit' : 1,//上传文件数
                            'width':65,
                            'height':25,
                            'successTimeout':10,//等待服务器响应时间
                            'removeTimeout' : 0.2,//成功显示时间
                            'onUploadSuccess' : function(file, data, response) {
                                data=$.parseJSON(data);
                                var imageUrl = data.image?data.url:'http://127.0.0.1/project/hdphp_fk_cms/Static/image/default.png';
                                var li="<li path='"+data.path+"' url='"+data.url+"'><img src='"+imageUrl+"' class='hd-w80 hd-h70'/><a href='javascript:;' style='color: red;' class='del-img'>X</a><input type='hidden' name='pic' value='"+data.path+"'/></li>";
                                $("#uploadList ul").prepend(li);
                            }
                        });
                    });
                </script>
                <div id="uploadList">
                    <ul>
                        
                    </ul>
                </div>
            </div>
					</td>
					<td id='pic-list'></td>
				</tr>
			</table>
            <!--列表图结束-->
            <!--商品图册-->
			<table class='table table-bordered'>
				<tr>
					<th colspan="3" class="btn btn-primary">商品图册</th>
				</tr>
				<tr class="info">
					<td>上传图片</td>
					<td>
					<div lab="uploadFile">
                            <input id="pic" type="file" multiple="true">
                            <span>类型: *.jpg,*.png 大小: 2000KB 数量: 10</span>
                            <script type="text/javascript">
                                $(function() {
                                    $('#pic').uploadify({
                                        'formData': {//POST数据
                                            '<?php echo session_name();?>' : '<?php echo session_id();?>',
                                        },
                                        'fileTypeDesc' : '上传文件',//上传描述
                                        'fileTypeExts' : '*.jpg;*.png',
                                        'swf'      : 'http://127.0.0.1/project/hdphp_fk_cms/Static/uploadify/uploadify.swf',
                                        'uploader' : '<?php echo U("uploadPic");?>',//上传操作方法
                                        'buttonText':'选择文件',
                                        'fileSizeLimit' : '2000KB',
                                        'uploadLimit' : 100,//上传文件数
                                        'width':65,
                                        'height':25,
                                        'successTimeout':10,//等待服务器响应时间
                                        'removeTimeout' : 0.2,//成功显示时间
                                        'onUploadSuccess' : function(file, data, response) {
                                            data=$.parseJSON(data);
                                            var imageUrl = data.image?data.url:'http://127.0.0.1/project/hdphp_fk_cms/Static/image/default.png';
                                            var li="<li path='"+data.path+"' url='"+data.url+"'><img src='"+imageUrl+"' class='hd-w80 hd-h70'/><a href='javascript:;' style='color: red;' class='del-img'>X</a><input type='hidden' name='shopPic[]' value='"+data.path+"'/></li>";
                                            $("#picList ul").prepend(li);
                                        }
                                    });
                                });
                            </script>
                        <div id="picList">
                            <ul>
     
                            </ul>
                        </div>
                    </div> 
                    </td>
                    <td id='pic-list'></td>
				</tr>
			</table>
             <!--商品图册结束-->
             <!--商品详情-->
			<table class='table'>
				<tr class="next_show">
					<th class="btn btn-primary">商品详细</th>
				</tr>
				<tr class="info">
					<td>
						<script id="editor" type="text/plain" style="width:100%;height:300px;" name="intro"></script>
                        <script>
                            var ue = UE.getEditor('editor');
                        </script>
					</td>
				</tr>
			</table>
			 <!--商品详情结束-->
            <!--售后服务-->
			<table class='table'>
				<tr class="next_show">
					<th class="btn btn-primary">售后服务</th>
				</tr>
				<tr class="info">
					<td>
						<script id="editor1" type="text/plain" style="width:100%;height:300px;" name="service"></script>
                        <script>
                            var ue = UE.getEditor('editor1');
                        </script>
					</td>
				</tr>
			</table>
			 <!--售后服务结束-->
			<input type="submit" value="确认添加" class="btn btn-primary btn-block btn-large" />
		</fieldset>
	</form>

	</div>
	</div>
	</div>
</body>
</html>

<script type="text/javascript">
    //商品分类异步函数
    function getSpecAttr(cid){
         //通过cid找到相对应的类型属性
        $.ajax({
            type:"post",
            url:"<?php echo U('Goods/getTypeAttr');?>",
            data:{cid : cid},
            dataType:'json',
            success:function(phpData){
                //定义规格和属性字符串
                var attr = '';
                var spec = '';
                //循环json组合字符串
                $.each(phpData, function(k,v) {
                    //如果是属性的时候
                    if(v.type == 1){
                        attr += '<tr class="info" style="color:red">' + 
                            '<th class="w100">'+v.title+'</th>' + 
                            '<th>' + 
                            '<select name="attr['+v.attrid+']">' + 
                            '<option value="">------请选择------</option>';
                            var option = '';
                            $.each(v.content, function(kk,vv) {    
                            option += '<option value="'+vv+'">'+vv+'</option>';                                                       
                            });
                            attr += option;
                            attr += '</select>' + 
                            '</th>' + 
                            '<th></th>' + 
                            '</tr>';  
                    }else{
                        //如果是规格的时候
                        spec += '<tr class="info" style="color: blue;">' + 
                            '<th class="w100">'+v.title+'</th>' + 
                            '<th width="50">' + 
                            '<select name="spec['+v.attrid+'][value][]">' + 
                            '<option value="">请选择</option>';
                            var option = '';
                            $.each(v.content, function(kk,vv) {    
                            option += '<option value="'+vv+'">'+vv+'</option>';                                                       
                    });
                    //连接option
                    spec += option;
                    spec += '</select>' + 
                        '</th>' + 
                        '<th>附加价格&nbsp;&nbsp;' +
                        '<input type="text" name="spec['+v.attrid+'][price][]" id="" value="0"/>' + 
                        ' <a href="javascript:;" class="hd-btn hd-btn-primary hd-btn-sm add-spec" style="margin: 0 0 0 0;">&nbsp;&nbsp;添加规格</a>' + 
                        '</th>' + 
                        '</tr>';
                    }
                                                                                          
                });
                //插入到属性的表格中
                $('#attr').html(attr);
                $('#spec').html(spec);
            }
        });    
    }
    //商品分类异步函数结束
    
    //商品分类js
	$(function(){
        //选择select下name为class_cid的元素，
        $('select[name=class_cid]').change(function(){
        //获得选择分类的cid
        var cid = $(this).val();
        //调用函数
        getSpecAttr(cid);
    })
    //商品分类js结束
    
    //点击添加规格，规格会多一个
    $('.add-spec').live('click',function(){
        var tr = $(this).parents('tr');
        //克隆一个父级tr
        var cloneTr = tr.clone();
        cloneTr.find('a').html('删除规格').removeClass('hd-btn-primary').removeClass('add-spec').addClass('hd-btn-danger remove-spec');
        //插入到当前tr的下一行
        tr.after(cloneTr);
    })
    //点击删除规格
    $('.remove-spec').live('click',function(){
        $(this).parents('tr').remove();
    })
    
    //表单提交，把规格和属性放到隐藏域
        $('#shopForm').submit(function(){
            //抓到规格和属性的内容
            var attr = $('#attr').html();
            var spec = $('#spec').html();
            //存到隐藏域，为了提交给php
            var hidden = "<input type='hidden' name='selected[attr]' value='"+attr+"'/>";
                hidden += "<input type='hidden' name='selected[spec]' value='"+spec+"'/>";
                $(this).append(hidden);
        })
                    
        //让选中规格和属性都有selected属性
        $('select').live('change',function(){
        //让当前表单选中的option加一个selected,让其他的兄弟元素清除selected
        $(this).find('option:selected').attr('selected',true).siblings().removeAttr('selected');
        })
        //操作图片的上传及删除-列表图
        //点击x删除图片
        $('.del-img').click(function(){
        //父级td
        var p = $(this).parents('p');
        //获得完整路径
        var path = $(this).attr('path');
        //获得对应的aid
        var gid = $(this).attr('gid');
            $.ajax({
                type:"post",
                url:"<?php echo U('delImg');?>",
                data:{path : path,gid : gid},
                success:function(){
                   p.remove(); 
                }
            });    
        })
        
})
</script>
